// vue 文件
<!-- 根据路由生成 多级递归嵌套菜单 -->
<template>
    <a-sub-menu :key="menuData.path">
        <template #title>
            <component :is="$antIcons[menuData.meta.icon]" />
            <a-space class="menu-title">{{ $t(menuData.meta.title) }}</a-space>
        </template>
        <template v-for="item in menuData.children" :key="item.path">
            <template v-if="!item.children">
                <router-link :to="{ path: item.path }">
                    <a-menu-item :key="item.path">
                        <component :is="$antIcons[item.meta.icon]" />
                        <a-space class="menu-title">{{ $t(item.meta.title) }}</a-space>
                    </a-menu-item>
                </router-link>
            </template>
            <template v-else>
                <!-- 递归菜单数据 -->
                <psp-sub-menu :menu-data="item" :key="item.path" />
            </template>
        </template>
    </a-sub-menu>
</template>

<script setup>
import { UserOutlined } from '@ant-design/icons-vue'
const props = defineProps({
    menuData: {
        type: Object,
        default: () => ({}),
    }
})
</script>

<style lang="less" scoped>
.menu-title{
    margin-left: 12px;
}
</style>
